<template>
    <!-- 生产进度跟踪 -->
    <div class="main-container" id="main-container">
        <div style="background: #fff; height: 100%" id="prodProgressFollow">
            <PageTabelLayout>
                <template #pageHeader>
                    <div class="my-header" v-if="headerShow" style="padding: 10px;box-sizing: border-box;">
                        <a-form size="small" :model="searchData" auto-label-width layout="inline">
                            <a-form-item label-col-flex="80px" :style="{width:'320px'}" label="流转卡号">
                                <a-input class="bacClass" />
                            </a-form-item>
                            <a-form-item label-col-flex="80px" :style="{width:'320px'}" label="生产车间">
                                <a-input class="bacClass" allow-clear />
                            </a-form-item>
                            <a-form-item label-col-flex="80px" :style="{width:'320px'}" label="客户名称">
                                <a-input class="bacClass" allow-clear />
                            </a-form-item>
                            <a-form-item label-col-flex="80px" :style="{width:'320px'}" label="业务员">
                                <a-input class="bacClass" allow-clear />
                            </a-form-item>
                            <a-form-item label-col-flex="80px" :style="{width:'320px'}" label="计划单号">
                                <a-input class="bacClass" />
                            </a-form-item>
                            <a-form-item label-col-flex="80px" :style="{width:'320px'}" label="客户订单号">
                                <a-input class="bacClass" allow-clear />
                            </a-form-item>
                            <a-form-item label-col-flex="80px" :style="{width:'320px'}" label="色号">
                                <a-input class="bacClass" allow-clear />
                            </a-form-item>
                            <a-form-item label-col-flex="80px" :style="{width:'320px'}" label="色称">
                                <a-input class="bacClass" allow-clear />
                            </a-form-item>
                            <a-form-item label-col-flex="80px" :style="{width:'320px'}" label="开卡日期">
                                <a-range-picker  popup-container="html"  class="bacClass" allow-clear />
                            </a-form-item>
                            <a-form-item label-col-flex="80px" :style="{width:'320px'}" label="客订名称">
                                <a-input class="bacClass" />
                            </a-form-item>
                            <a-form-item label-col-flex="80px" :style="{width:'320px'}" label="排产日期">
                                <a-range-picker  popup-container="html"  class="bacClass" allow-clear />
                            </a-form-item>
                            <a-form-item label-col-flex="80px" :style="{width:'320px'}" label="布号">
                                <a-input class="bacClass" allow-clear />
                            </a-form-item>
                            <a-form-item label-col-flex="80px" :style="{width:'320px'}" label="品名">
                                <a-input class="bacClass" allow-clear />
                            </a-form-item>
                            <a-form-item label-col-flex="80px" :style="{width:'320px'}" label="毛坯出库">
                                <a-select popup-container="html"  allow-clear class="bacClass" >
                                    <a-option value="全部">全部</a-option>
                                    <a-option value="已出库">已出库</a-option>
                                    <a-option value="未出库">未出库</a-option>
                                </a-select>
                            </a-form-item>
                            <a-form-item label-col-flex="80px" :style="{width:'320px'}" label="工序进度">
                                <a-select popup-container="html"  allow-clear class="bacClass" >
                                    <a-option value="全部">全部</a-option>
                                    <a-option value="已完成">已完成</a-option>
                                    <a-option value="未完成">未完成</a-option>
                                </a-select>
                            </a-form-item>
                            <a-form-item label-col-flex="80px" :style="{width:'320px'}" label="排产情况">
                                <a-select popup-container="html"  allow-clear class="bacClass" >
                                    <a-option value="全部">全部</a-option>
                                    <a-option value="已排">已排</a-option>
                                    <a-option value="未排">未排</a-option>
                                </a-select>
                            </a-form-item>
                            <a-form-item label-col-flex="80px" :style="{width:'320px'}" label="流转卡打印">
                                <a-select popup-container="html"  allow-clear class="bacClass" >
                                    <a-option value="全部">全部</a-option>
                                    <a-option value="已打印">已打印</a-option>
                                    <a-option value="未打印">未打印</a-option>
                                </a-select>
                            </a-form-item>
                        </a-form>
                    </div>
                    <div class="my-divisders">
                        <a-divider orientation="center">
                            <icon-double-up v-if="headerShow" @click="changHeadShow(false)" :strokeWidth="2" :size="18" />
                            <icon-double-down v-else @click="changHeadShow(true)" :strokeWidth="2" :size="18" />
                        </a-divider>
                    </div>
                    <div class="my-tool-bar" style="margin-bottom: 10px;">
                        <Toolbar :items="['查询', '设置快反', '取消快反', 'HOLD单',
                            'HOLD取消', '车间进度', '打印', '导出']" @select="selectHandler" @export="exportHandler"
                            @dyBoufei="dyBoufeiHandler" @setFast="setFastAndHold(0)" @cancelFast="setFastAndHold(1)"
                            @setHOLD="setFastAndHold(2)" @cancelHOLD="setFastAndHold(3)"
                            @farmProgress="farmProgressHandler" />
                    </div>
                </template>
                <template #pageTabel>
                    <a-spin :loading="pageLoading.value" tip="加载中" dot style="height:99%;width: 100%;z-index:999 ;">
                        <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true"
                            rowSelection="multiple" @grid-ready="gridReady" style="height:100%" class='ag-theme-alpine'
                            :defaultColDef="defaultColDef" :rowData="table.dataList" :columnDefs="cfsValue"
                            :localeText="localeTextData" @rowClicked="clickWorkItem" @columnResized="onColumnResized"
                            @columnMoved="onColumnMoved"></AgGridVuesCopys>
                    </a-spin>
                </template>
                <paginationCopys :page-size-options="pagingList1" :total="total" show-total show-jumper show-page-size
                    @change="changePage" @page-size-change="changeSize" style="justify-content: center;margin-top: 10px;"
                    :page-size="pagination.pageSize" :current="pagination.page" />
            </PageTabelLayout>
            <a-drawer :drawer-style="{ zIndex: 9999 }" height="100%" unmountOnClose :visible="pageData.showSpeed"
                :mask-closable="false" placement="bottom" @cancel="pageData.showSpeed = false">
                <template #title>车间进度</template>
                <workShopSpeed :flowCardCode="farmData.flowCardCode" />
                <template #footer>
                    <a-button @click="pageData.showSpeed = false">
                        关闭
                    </a-button>
                    <a-button type="primary" @click="toExportRow">
                        导出
                    </a-button>
                </template>
            </a-drawer>
        </div>
    </div>
</template>

<script  lang="ts">
import PageTabelLayout from '@/components/pageTabelLayout.vue';
import { ref, reactive, onMounted } from 'vue';

import { localeText } from '@/api/aggridZw'
import emitter from '@/hooks/useEventBus'
import { usePagination, useTable } from '@/hooks/table';
import { Message, Modal } from '@arco-design/web-vue';
import { assTable } from '@/utils/assemblyLevelTable';
import { prodSchedule } from '@/api/DyeingshopManagement/prodFollow'
import { pagingList } from "@/api/paging";
import { saveOrUpdateGridState as saveOrUpdateGridState01 } from '@/hooks/useGridState'

export default {
    name: "prodProgressFollow",
    setup() {
        let headerShow = ref<boolean>(true);
        let prodScheduleApi = prodSchedule();
        let changHeadShow = (boolVal: boolean) => {
            headerShow.value = boolVal;
            emitter.emit('window-change');
        };
        const searchData = reactive<{
            workshop: string;
            process: string;
            beginClasses: string;
            finishClasses: string;
            createTime: string;
            createTime2: string;
            flowCardCode: string;
            customName: string;
            staffCode: string;
            staffName: string;
        }>({
            workshop: '',
            process: '',
            beginClasses: '',
            finishClasses: '',
            createTime: '',
            createTime2: '',
            flowCardCode: '',
            customName: '',
            staffCode: '',
            staffName: ''
        });
        onMounted(() => {
            selectHandler();
        });
        const pageLoading = ref(false)
        const doRefresh = async () => {
            pageLoading.value = true
            updateGridState01()
            await prodScheduleApi.getProdPageList({ page: pagination.page, size: pagination.pageSize }).then(({ code, data }: any) => {
                if (code === 200) {
                    console.log(data);
                    total.value = data.total;
                } else {
                    Message.error('数据查询失败')
                }
            })
            pageLoading.value = false
        };
        const selectHandler = () => {
            pagination.page = 1;
            doRefresh();
        };
        const dyBoufeiHandler = () => { };
        const setFastAndHold = (status: any) => {
            let selectList = gridOption.value.getSelectedRows();
            if (selectList.length === 0) {
                Message.error(`请勾选需要操作${status === 0 ? '设置快反' : status === 1 ? '取消快反' : status === 2 ? 'HOLD单' : 'HOLD取消'}的数据`)
                return
            } else {
                Modal.confirm({
                    title: "提示",
                    content: `确定要批量${status === 0 ? '设置快反' : status === 1 ? '取消快反' : status === 2 ? 'HOLD单' : 'HOLD取消'}选中数据吗？`,
                    cancelText: "取消",
                    okText: "确定",
                    onOk: async () => {
                        let dataList = selectList.map((v: any) => { return { flowCardCode: v.flowCardCode } });
                        if (status === 0) {
                            dataList.forEach((v: any) => {
                                v.fastReverse = 1
                            })
                        } else if (status === 1) {
                            dataList.forEach((v: any) => {
                                v.fastReverse = 0
                            })
                        } else if (status === 2) {
                            dataList.forEach((v: any) => {
                                v.hold = 1
                            })
                        } else {
                            dataList.forEach((v: any) => {
                                v.hold = 0
                            })
                        };
                        let res: any = await prodScheduleApi.setReverseOrHold([...dataList]);
                        if (res.code === 200) {
                            Message.success(res.message);
                            selectHandler();
                        } else {
                            Message.error(res.message);
                        }
                    },
                });

            }
        };
        let farmData: any = ref({});
        const farmProgressHandler = () => {
            if (farmData.flowCardCode) {
                pageData.showSpeed = true;
            } else {
                Message.error('请点击需要查看车间进度的数据')
            }
            // let selectList = gridOption.value.getSelectedRows();
        };
        const clickWorkItem = (data: any) => {
            //  console.log(data);
            farmData.value = data;
        }
        const pageData = reactive<{ showSpeed: boolean }>({ showSpeed: false })

        const gridOption = ref();
        const colState = ref()
        const gridReady = (params: any) => {
            gridOption.value = params.api
            colState.value = params.columnApi
        }
        const table = useTable();
        const defaultColDef = {
            sortable: true,
            resizable: true,
            filter: true,
            // flex: 1,
            width: 150,
        };
        const exportHandler = () => {
            let selectList = gridOption.value.getSelectedRows();
            // console.log(selectList);
            if (selectList.length === 0) {
                Message.error('请勾选需要导出的数据')
                return
            } else {
                //导出数据
                let nowRow = table.dataList.filter(function (o) {
                    return (gridOption.value.getSelectedRows().map((o: any) => { return o.id })).indexOf(o["id"]) !== -1;
                })
                assTable(cfsValue, nowRow, '生产进度追踪');
            }
        };
        const toExportRow = () => {
            emitter.emit('export-speed');
        };
        const pagination = usePagination(doRefresh);
        let cfsValue: any[] = [
            {
                headerName: '开卡日期',
                field: ''
            },
            {
                headerName: '流转卡号',
                field: ''
            },
            {
                headerName: '布号',
                field: ''
            },
            {
                headerName: '品名',
                field: ''
            },
            {
                headerName: '色称',
                field: ''
            },
            {
                headerName: '匹数',
                field: ''
            },
            {
                headerName: '客户名称',
                field: ''
            },
            {
                headerName: '生产车间',
                field: ''
            },
            {
                headerName: '缸型',
                field: ''
            },
            {
                headerName: '工艺类型',
                field: ''
            },
            {
                headerName: '加急日期',
                field: ''
            },
            {
                headerName: '管型',
                field: ''
            },
            {
                headerName: '设备编号',
                field: ''
            },
            {
                headerName: '排产序号',
                field: ''
            },
            {
                headerName: '工段',
                field: ''
            },
            {
                headerName: '当前工序',
                field: ''
            },
            {
                headerName: '最近扫描进度',
                field: ''
            },
            {
                headerName: '批核情况',
                field: ''
            },
            {
                headerName: '品检退回修部门',
                field: ''
            },
            {
                headerName: '品检退回修原因',
                field: ''
            },
            {
                headerName: '物测结果',
                field: ''
            },
            {
                headerName: '已用天数',
                field: ''
            },
            {
                headerName: '生产天数',
                field: ''
            },
            {
                headerName: '延期天数',
                field: ''
            },
            {
                headerName: '发货生产周期(按天)',
                field: ''
            },
            {
                headerName: '生产交期',
                field: ''
            },
            {
                headerName: '批核日期',
                field: ''
            },
            {
                headerName: '数量',
                field: ''
            },
            {
                headerName: '入库日期',
                field: ''
            },
            {
                headerName: '入库数量',
                field: ''
            },
            {
                headerName: '成品重量',
                field: ''
            },
            {
                headerName: '成品码数',
                field: ''
            },

            {
                headerName: '成品磅数',
                field: ''
            },
            {
                headerName: '发货人',
                field: ''
            },
            {
                headerName: '发货日期',
                field: ''
            },
            {
                headerName: '发货匹数',
                field: ''
            },
            {
                headerName: '发货重量',
                field: ''
            },
            {
                headerName: '付运单号',
                field: ''
            },
            {
                headerName: '付运日期',
                field: ''
            },
            {
                headerName: '送货人',
                field: ''
            },
            {
                headerName: '送货车号',
                field: ''
            },
            {
                headerName: '送货日期',
                field: ''
            },
            {
                headerName: '加工类型',
                field: ''
            },
            {
                headerName: '部门',
                field: ''
            },
            {
                headerName: '流转卡类型',
                field: ''
            },
            {
                headerName: '流转卡建立人',
                field: ''
            },
            {
                headerName: '布种类型',
                field: ''
            },
            {
                headerName: '门幅',
                field: ''
            },
            {
                headerName: '克重',
                field: ''
            },
            {
                headerName: '色样',
                field: ''
            },
            {
                headerName: '颜色深浅',
                field: ''
            },
            {
                headerName: '色样要求',
                field: ''
            },
            {
                headerName: '送货地址',
                field: ''
            },
            {
                headerName: '生产流程',
                field: ''
            },
            {
                headerName: '坯布编号',
                field: ''
            },
            {
                headerName: '坯布名称',
                field: ''
            },
            {
                headerName: '纱批',
                field: ''
            },
            {
                headerName: '计划单号',
                field: ''
            },
            {
                headerName: '客户订单号',
                field: ''
            },
            {
                headerName: '业务员',
                field: ''
            },
            {
                headerName: '客户名称',
                field: ''
            },
            {
                headerName: '商品编号',
                field: ''
            },
            {
                headerName: '商品名称',
                field: ''
            },
            {
                headerName: '加急类型',
                field: ''
            },
            {
                headerName: '染整单号',
                field: ''
            },
            {
                headerName: '流转卡生产时间',
                field: ''
            },
            {
                headerName: '排产日期',
                field: ''
            },
            {
                headerName: '出库日期',
                field: ''
            },
            {
                headerName: '染色实际开始时间',
                field: ''
            },
            {
                headerName: '染色实际结束时间',
                field: ''
            },
            {
                headerName: '拼缸缸号(流转号)',
                field: ''
            },
            {
                headerName: '总部交货日期',
                field: ''
            },
            {
                headerName: '营销交货日期',
                field: ''
            },
            {
                headerName: '色号',
                field: ''
            },
            {
                headerName: '确认色',
                field: ''
            },
            {
                headerName: '是否配方',
                field: ''
            },
            {
                headerName: '布种类型',
                field: ''
            },
            {
                headerName: '最后修改时间',
                field: ''
            },
            {
                headerName: '织厂',
                field: ''
            },
            {
                headerName: '流转卡是否打印',
                field: ''
            },
        ]
        let a = [{
            showRowGroup: 'hide_def',
            "headerName": "",
            "checkboxSelection": true,
            "headerCheckboxSelection": true,
            "pinned": "left",
            "width": 50,
            resizable: false,
            filter: false,
            sortable: false,
            minWidth: 50,
            maxWidth: 50,
            lockPosition: "left",
        }]
        cfsValue = a.concat(cfsValue);
        const total = ref(10);
        const changePage = (val: any) => {
            pagination.page = val
            doRefresh();
        }
        const changeSize = (val: any) => {
            pagination.pageSize = val
            doRefresh();
        }
        const localeTextData: any = ref(localeText);
        const pagingList1: any = ref(pagingList)
        const { saveGridState: saveGridState01, updateGridState: updateGridState01 } = saveOrUpdateGridState01('prodProgressFollow01', gridOption, colState, cfsValue)
        const onColumnMoved = () => {
            saveGridState01()
        }
        const onColumnResized = () => {
            saveGridState01()
        }
        return {
            pageLoading,
            saveOrUpdateGridState01,
            saveGridState01,
            updateGridState01,
            onColumnMoved,
            onColumnResized,
            colState,
            pagingList1,
            headerShow,
            searchData,
            changHeadShow,
            selectHandler,
            exportHandler,
            table,
            pagination,
            changePage,
            changeSize,
            localeTextData,
            defaultColDef,
            gridReady,
            cfsValue,
            total,
            dyBoufeiHandler,
            setFastAndHold,
            farmProgressHandler,
            pageData,
            clickWorkItem,
            farmData,
            toExportRow
        }
    },
    components: { PageTabelLayout,  }
}
</script>

<style scoped>
.toFlex {
    display: flex;
    align-items: center;
}

.main-container {
    height: 100%;
}

.arco-drawer-header .arco-drawer-title {
    width: 100%;
}


.aInput {
    background: #fff;
    width: 270px;
    border: 1px solid #c9cdd3;
}

:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
}

.aInputLine {
    border: 1px solid #c9cdd3;
    background: #fff;
}
:deep(.arco-picker input){
    padding-left: 0 !important;
}
:deep(.arco-picker){
    padding-left: 0 !important;
}
:deep(.arco-picker-separator){
    padding: 0 !important;
}

</style>